import Vue from 'vue'
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from '@/pages/About.vue'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import Message from '@/pages/Message.vue'
import Detail from '@/pages/Detail.vue'

// 使用插件
Vue.use(VueRouter)

// 创建并导出一个路由器
export default new VueRouter({
  mode:'history',
  // routes中配置的是一个一个的路由规则
  routes: [
    { 
      name:'guanyu',
      path: '/about', 
      component: About 
    },
    { 
      name:'zhuye',
      path: '/home', 
      component: Home,
      children:[
        {
          name:'xinwen',
          path:'news',
          component:News
        },
        {
          name:'xinxi',
          path:'message',
          component:Message,
          children:[

            {
              name:'xiang',
              path:'detail',
              component:Detail,
              // props的第一种写法 —— 对象写法，作用：把对象中每一组key-value的组合，都以prrops的形式传递给了Detail组件
              // props:{a:'哈哈',b:'嘿嘿'}

              // props的第二种写法 —— 布尔值写法，作用：把路由收到的所有的params参数，全都以props的形式传给Detail组件
              // props:true

              // props的第三种写法 —— 函数写法
              props($route){
                return $route.query
              }
            }

          ]
        }
      ]
    },
  ]
})